<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>签到</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <include file="public/comm" />		
	</head>

	<body>
		<header class="mui-bar mui-bar-nav white fs_xl">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title fs_xl">签到</h1>
		</header>
		<div class="mui-content fs_xl" style="padding-bottom: initial;height: 100%;">
			<div class="qiandao">
				<div class="qd_bg">
					<img src="__STATIC__/images/qiandao.png" />
				</div>
				<div class="qd_m fs_xl" style="height: 18em;">
					<div class="qd_data fs_xxl">已签<span class="fs_xxxi">0</span>天</div>
					<div class="qd_list">
						<ul class="cls">
							<li class="item1">
								<img class="qd_img1" src="__STATIC__/images/qiandao_bg.png" />
								<img class="qd_img2" src="__STATIC__/images/qiandao_03.png" />
								<img class="qd_img3" src="__STATIC__/images/qiand_01.png" />
								<span class="li_hx"></span>
							</li>
							<li class="item2">
								<img class="qd_img1" src="__STATIC__/images/qiandao_bg.png" />
								<img class="qd_img2" src="__STATIC__/images/qiandao_03.png" />
								<img class="qd_img3" src="__STATIC__/images/qiand_01.png" />
								<span class="li_hx"></span>
							</li>
							<li class="item3">
								<img class="qd_img1" src="__STATIC__/images/qiandao_bg.png" />
								<img class="qd_img2" src="__STATIC__/images/qiandao_03.png" />
								<img class="qd_img3" src="__STATIC__/images/qiand_01.png" />
								<span class="li_hx"></span>
							</li>
							<li class="item4">
								<img class="qd_img1" src="__STATIC__/images/qiandao_bg.png" />
								<img class="qd_img2" src="__STATIC__/images/qiandao_03.png" />
								<img class="qd_img3" src="__STATIC__/images/qiand_01.png" />
								<span class="li_hx"></span>
							</li>
							<li class="item5">
								<img class="qd_img1" src="__STATIC__/images/qiandao_bg.png" />
								<img class="qd_img2" src="__STATIC__/images/qiandao_03.png" />
								<img class="qd_img3" src="__STATIC__/images/qiand_01.png" />
								<span class="li_hx"></span>
							</li>
							<li class="item6">
								<img class="qd_img1" src="__STATIC__/images/qiandao_bg.png" />
								<img class="qd_img2" src="__STATIC__/images/qiandao_03.png" />
								<img class="qd_img3" src="__STATIC__/images/qiand_01.png" />
								<span class="li_hx"></span>
							</li>
							<li class="item7">
								<img class="qd_img1" src="__STATIC__/images/qiandao_bg.png" />
								<img class="qd_img2" src="__STATIC__/images/qiandao_03.png" />
								<img class="qd_img3" src="__STATIC__/images/qiand_01.png" />
								<span class="li_hx"></span>
								<img class="qd_jx" src="__STATIC__/images/qiandao_jx.png" />
							</li>
							<a class="ul_hx"></a>
						</ul>
						<div class="qd_da">
							<a class="fs_m">1</a>
							<a class="fs_m">2</a>
							<a class="fs_m">3</a>
							<a class="fs_m">4</a>
							<a class="fs_m">5</a>
							<a class="fs_m">6</a>
							<a class="fs_m">7</a>
						</div>
					</div>
					<div class="qd_btn">
						<a class="fs_xi">签到</a>
					</div>
				</div>
				<div class="qd_gz">
					<p class="qd_gz_p"><span class="fs_xl">签到规则</span></p>
					<div class="qiandao_gz">
						<span class="qd_span fs_xl">每连续签到<em>7</em>天</span>
						<div class="qd_im_m">
							<img src="__STATIC__/images/qianda_yjb.png" />
							<p>奖励<em>+200</em>银酒币</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			mui.init();
				var nums = {$sign_num};
				$(".qd_data span").text(nums);
				$(".item" + nums).prevAll().addClass("active");
				$(".item" + nums).addClass("active");
				$(".active").find(".qd_img1").hide();
				$(".active").find(".qd_img2").show();
				$(".active").find(".li_hx").show();
			$(function(){
				var imgL = $(".qd_list li").width() - $(".qd_img1").width();
				var imgL1 = $(".qd_list li").width() - $(".qd_img3").width();
				$(".qd_img2").css("left", imgL / 2);
				$(".qd_img3").css("left", imgL1 / 2);
			})
			<if !empty($is_sign)>$(".qd_btn a").text("已签到");</if>
			$(function() {
				$(".qd_btn a").one("click", function() {
					$.post("{:U('/Mobile/User/userSign')}",{'sign_num':{$sign_num}},function(data){
						if(data.status == 1){
							nums = nums + 1;
							if(nums > 7) {
								nums = 0;
								$(".qd_data span").text(nums);
								$(".qd_list li").find(".qd_img3").hide();
								$(".qd_list li").find(".qd_img2").hide();
								$(".qd_list li").find(".qd_img1").show();
								$(".qd_list li").find(".li_hx").hide();
								$(".qd_list li").removeClass("active");
							} else {
								$(".qd_data span").text(nums);
								$(".qd_btn a").text("已签到");
								var qdLi = $(".qd_list li");
								$(".item" + nums).addClass("active");
								$(".active").find(".qd_img1").hide();
								$(".active").find(".qd_img3").show();
								$(".active").find(".li_hx").show();
								if($(".item" + nums).siblings().hasClass("active")) {
									$(".item" + nums).siblings(".active").find(".qd_img3").hide();
									$(".item" + nums).siblings(".active").find(".qd_img2").show();
								} else {
									return false;
								}
								if(nums > 7) {
									nums = 1;
									$(".qd_list li").find(".qd_img3").hide();
									$(".qd_list li").find(".qd_img2").hide();
								}
							}
						}
						else{
							layer.alert(data.msg,2);
						}
					},'json');
					
				})
			})
		</script>
	</body>

</html>